<template>
	<view class="container">
		<u-sticky>
			<view class="search-box flex-x-bet-y-center">
				<view class="flex-1">
					<InputSearch :inputVal="queryParams.keyword" :customStyle="{margin: '0', flex: '1'}"
						@searchConfirm="searchInputConfirm"></InputSearch>
				</view>
			</view>

			<!-- <FilterSelect @search="filterSearch" :showPrice="false"></FilterSelect> -->
		</u-sticky>
		
		<view class="demand-list">
			<view class="demand-item flex-x-bet-y-center" v-for="(item,index) in listData" :key="item.id"  @tap="$myUni.navTo('/pages/demand/detail-demand?id=' + item.id)">
				<view class="">
					<view class="title">{{item.demandTitle}}</view>
					<view class="address">{{item.province}}{{item.city}}{{item.area}}{{item.address}}</view>
					<view class="date">{{item.entryTime}}</view>
				</view>
				<u-icon name="arrow-right" size="30"></u-icon>
			</view>
		</view>

		<u-loadmore :status="loadingStatus" font-size="28" icon-size="30"></u-loadmore>
	</view>

</template>

<script>
	import InputSearch from '@/components/InputSearch/index.vue'
	import FilterSelect from '@/components/FilterSelect/index.vue'
	import { demandHall } from '@/api/demand.js'
	export default {
		components: {
			InputSearch,
			FilterSelect,
		},
		data() {
			return {
				queryParams:{
					keyWord: '',
					pageNo: 1,
					pageSize: 10
				},
				listData: [],
				total: 0,
				loadingStatus: 'loading'
			};
		},
		onLoad(options) {
			this.queryList()
		},
		onReachBottom(){
			if(this.total > this.listData.length){
				this.queryParams.pageNo++
				this.queryList()
			}
		},
		methods: {
			searchInputConfirm(value) {
				this.queryParams.keyWord = value
				this.initQuery()
			},
			filterSearch(e) {
				console.log(e);
			},
			initQuery(){
				this.queryParams.pageNo = 1
				this.listData = []
				this.total = 0
				this.queryList()
			},
			queryList(){
				this.loadingStatus = 'loading'
				demandHall(this.queryParams).then(res => {
					this.listData.push(...res.result.records)
					this.total = res.result.total
					this.loadingStatus = this.total > this.listData.length ? 'loadmore' : 'nomore'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-top: 0;
	}

	.search-box {
		display: flex;
		background-color: #fff;
		padding: 30rpx;
		position: relative;
		z-index: 99;

		.filter-type {
			margin-right: 20rpx;
			width: 170rpx;
		}
	}
	
	.demand-list{
		margin: 30rpx;
		
		.demand-item{
			background: #FFFFFF;
			padding: 30rpx;
			border-radius: 19rpx 19rpx 19rpx 19rpx;
			margin-bottom: 30rpx;
			
			.title{
				font-weight: bold;
				font-size: 33rpx;
				color: #333333;
			}
			
			.address{
				font-weight: normal;
				font-size: 27rpx;
				color: #666666;
				padding: 10rpx 0;
			}
			
			.date{
				font-weight: normal;
				font-size: 27rpx;
				color: #666666;
			}
		}
	}
</style>